<template lang="pug">
  el-dialog(v-bind:visible.sync="dialogVisible"
  v-bind:fullscreen="true"
  v-bind:show-close="false"
  v-bind:close-on-click-modal="true"
  v-bind:close-on-press-escape="true"
  custom-class="exam-dialog"
  ref="examingDialog")
    el-container.exam-dialog--container
      el-header.exam-dialog--header
        div.col.title
          div.lable 考试科目：
          div.cnt {{examData.subject}}
        div.col.timer
          div.lable
          div.cnt
        div.col.student
          div.lable
          div.cnt
      el-main.exam-dialog--main
        div.exam-paper
          div.papers-area(v-for="(pItem,i) in papers")
            div.type-name {{pItem.title}}
            div.questions-area(v-for="(qItem,j) in pItem.paperQuesInfos" v-bind:class="qItem.answer === qItem.quesAnswer?'success':'error'")
              div.title
                span {{j+1}}. {{qItem.stem}}
                template(v-if="pItem.quesType === '2'")
                  i.tag-icon.el-icon-success(v-if="qItem.answer === qItem.quesAnswer")
                  i.tag-icon.el-icon-error(v-else)
              div.options-area(v-if="pItem.quesType === '2'")
                div.options-item
                  el-radio(v-model="qItem.answer" disabled label="A") A. {{qItem.answerA}}
                div.options-item
                  el-radio(v-model="qItem.answer" disabled label="B") B. {{qItem.answerB}}
                div.options-item
                  el-radio(v-model="qItem.answer" disabled label="C") C. {{qItem.answerC}}
                div.options-item
                  el-radio(v-model="qItem.answer" disabled label="D") D. {{qItem.answerD}}
              div.questions-constraint(v-if="pItem.quesType === '5'")
                div.answer--constraint {{qItem.answerConstraint}}
                div.answer--textarea(v-html="qItem.answer")
                div.answer-avatars
                  div.avatar(v-bind:style="{'background-image': 'url('+qItem.answerPicPath+')'}" v-on:click="handlerClickAvatar(qItem.answerPicPath)")
              div.question-score(v-if="pItem.quesType === '5'") 得分：{{qItem.score}}
              template(v-else)
                div.question-answer(v-if="qItem.answer !== qItem.quesAnswer")
                  div.question-answer--cnt 正确答案：
                    span.txt {{qItem.quesAnswer}}

      el-footer
        div.footer-mn
        div.btns-areaw
          el-button(type="warning" icon="el-icon-close" round v-on:click="handlerClickBtnClose") 关闭
</template>

<script type="text/ecmascript-6">
  import {ScoreQueryPaperURL} from '../config.toml'

  export default {
    name: 'scoreView',
    data() {
      return {
        bizKey: 'examing',
        dialogVisible: false,
        targetUrl: ScoreQueryPaperURL,
        papers: [],
        examData: {},
        currentStu: ''
      }
    },
    mounted() {
    },
    methods: {
      handlerClickAvatar(item) {
        this.$KalixDialogImgPreview({
          imgs: [item],
          selectItem: item
        })
      },
      open(row) {
        this.dialogVisible = true
        this.showPaper(row)
      },
      showPaper(row) {
        this.axios.request({
          method: 'GET',
          url: this.targetUrl,
          params: {
            examId: row.examId,
            paperId: row.paperId
          }
        }).then(res => {
          console.log('res.data==================', res.data)
          this.examData = res.data.data[0]
          this.papers = this.examData.paperQuesList
          this.currentStu = this.examData.subject
          console.log('this.papers ==================', this.papers)
        })
      },
      handlerClickBtnClose() {
        this._closeDialog()
      },
      _closeDialog() {
        this.dialogVisible = false
        this.$KalixEventBus.$emit(this.bizKey + '-' + 'KalixDialogClose', null)
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .exam-paper
    .papers-area
      & + .papers-area
        margin-top 50px
      .type-name
        font-size 16px
      .questions-area
        position relative
        margin-top 20px
        overflow hidden
        &:after
          position absolute
          display block
          content ''
          height 1px
          left 0
          right 0
          bottom 0
          background-color #cccccc
        .title
          position relative
          font-size 16px
          margin-bottom 5px
          padding-left 24px
          span
            position relative
            margin-right 8px
            z-index 99
          .tag-icon
            position absolute
            z-index 90
            left 0
            top 0
        &.success
          .tag-icon
            color #67C23A
        &.error
          .tag-icon
            color #F56C6C
        .options-area
          padding 24px
          overflow hidden
          .options-item--area
            clear both
            &.area-2
              width 100%
          .options-item
            font-size 14px
            margin-top 10px
            cursor pointer
            float left
            clear both
            .tag
              font-weight bold
              margin-right 8px
            .text
              flex 1

          .answer--constraint
            line-height 1.5
            margin-bottom 20px
          .answer--textarea
            width 50%

      .question-answer,
      .question-score
        padding 0 24px 24px
        .question-answer--cnt
          font-size 14px
          .txt
            font-weight bold
            font-size 18px
            color #67C23A
    .questions-constraint
      .answer--textarea
        padding 0 24px
        margin-bottom 24px
    .answer-avatars
      padding 0 24px
      margin-bottom 24px
      .avatar
        width 100px
        height 100px
        background 50% 50% no-repeat
        background-size cover
        cursor pointer
        &:hover
          box-shadow 3px 3px 10px #000

</style>
